<template>
  <div>
    <!-- 头部搜索 -->
    <div class="box">
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入小区或地址"
          @search="onSearch"
          @click="$router.push('/city')"
          left-icon="search
"
          background="#4fc08d00"
          show-action
        >
          <template #action>
            <van-icon
              name="location-o"
              size="20"
              color="#fff"
              @click="$router.push('/map')"
            />
          </template>
          <template #label
            >{{ city.label }}
            <van-icon name="arrow-down" />
          </template>
        </van-search>
      </form>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipeList" :key="item.id">
        <van-image :src="'http://liufusong.top:8080' + item.imgSrc" />
      </van-swipe-item>
    </van-swipe>
    <!-- 页面导航 -->
    <div>
      <van-grid clickable :column-num="4" icon-size="36px" :border="false">
        <van-grid-item icon="wap-home-o" text="整租" to="/" />
        <van-grid-item icon="friends-o" text="合租" url="/vant/mobile.html" />
        <van-grid-item icon="location-o" text="地图找房" to="/" />
        <van-grid-item icon="home-o" text="去出租" url="/vant/mobile.html" />
      </van-grid>
    </div>
    <!-- 租房小组导航 -->
    <div class="zufang">
      <div class="zufang-title">
        <h4>租房小组</h4>
        <a href="">更多</a>
      </div>
      <div class="zufang-text">
        <div class="zufang-min" v-for="item1 in groupsList" :key="item1.id">
          <div class="imgs">
            <van-image
              width="60"
              height="60"
              :src="'http://liufusong.top:8080' + item1.imgSrc"
            />
          </div>
          <div class="d-text">
            <p>{{ item1.title }}</p>
            <p>{{ item1.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwipeList, getGroupsList } from '@/api/user'
import { Toast } from 'vant'
export default {
  name: 'article-title',
  data() {
    return {
      value: '',
      swipeList: [],
      groupsList: [],
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },

  async created() {
    // 轮播图
    const res1 = await getSwipeList()
    this.swipeList = res1.body
    // 租房小组
    const res2 = await getGroupsList()
    this.groupsList = res2.body
  },

  methods: {
    onSearch(val) {
      Toast(val)
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-icon-location-o[data-v-5b5b10cc]:before {
  color: #fff;
}
::v-deep .van-icon-friends-o:before {
  color: #03af68;
}
::v-deep .van-icon-wap-home-o:before {
  color: #03af68;
}
::v-deep .van-icon-location-o:before {
  color: #03af68;
}
::v-deep .van-icon-home-o:before {
  color: #03af68;
}
.zufang {
  padding: 0 10px 0 10px;
  width: 375px;
  height: 187px;
  background: #f6f5f6;
  .zufang-title {
    line-height: 47px;
    display: flex;
    height: 47px;
    // background-color: #fff;
    a {
      padding-left: 258px;
      color: #7b7f83;
    }
  }
  .zufang-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .zufang-min {
      border-radius: 5px;
      margin-bottom: 10px;
      width: 168px;
      height: 60px;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      .d-text {
        padding: 10px 0 10px 5px;
      }
    }
  }
}
::v-deep .van-grid-item__content .van-icon {
  line-height: 50px;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f2fbf7;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.box {
  position: absolute;
  z-index: 55;
  width: 100%;
}
</style>
